<template>
	<div class="top-tab">
		<div :class="tabindex=='1'?'active':''" @click="tabbtn('1')">大致信息</div>
		<div :class="tabindex=='2'?'active':''" @click="tabbtn('2')">镜下所见</div>
	</div>
	<div class="info-detail" v-if="tabindex==1">
		<div class="info-detail-left">
			<div class="info-box">
				<div class="serialnumber">1</div>
				<div class="labername">姓名</div>
				<div class="laberconten">张三</div>
			</div>
			<div class="info-box">
				<div class="serialnumber">2</div>
				<div class="labername">性别</div>
				<div class="laberconten">女</div>
			</div>
			<div class="info-box">
				<div class="serialnumber">3</div>
				<div class="labername">年龄</div>
				<div class="laberconten">30</div>
			</div>
			<div class="info-box">
				<div class="serialnumber">4</div>
				<div class="labername">单号</div>
				<div class="laberconten">3131313130</div>
			</div>
			<div class="info-box">
				<div class="serialnumber">5</div>
				<div class="labername">项目</div>
				<div class="laberconten">消化系统病理</div>
			</div>
			<div class="info-box">
				<div class="serialnumber">6</div>
				<div class="labername">送检日期</div>
				<div class="laberconten">2024/6/18</div>
			</div>
			<div class="info-box">
				<div class="serialnumber">7</div>
				<div class="labername">取材部位</div>
				<div class="laberconten">胃窦前壁</div>
			</div>
			<div class="info-box">
				<div class="serialnumber">8</div>
				<div class="labername">临床诊断</div>
				<div class="laberconten">胃炎</div>
			</div>
			<div class="info-box">
				<div class="serialnumber">9</div>
				<div class="labername">诊断医生</div>
				<div class="laberconten">张三</div>
			</div>
			<div class="info-box">
				<div class="serialnumber">10</div>
				<div class="labername">审核医生</div>
				<div class="laberconten">李四</div>
			</div>
		</div>
		<div class="info-detail-right">
			<div class="idea-title">诊断意见</div>
			<div class="idea-txt">（胃窦前壁）全层胃窦型粘膜组织，慢性非萎缩性胃炎，慢性炎症（++），活动性（++），萎缩（-），肠上皮化生（-），淋巴滤泡（-），异型增生（-）。</div>
		    <div class="idea-bot">
				<div><span class="lefttxt">诊断医师</span>张三</div>
				<div><span class="lefttxt">诊断日期</span>2024/6/19</div>
				<div><span class="lefttxt">审核医师</span>张三</div>
			</div>
			<div class="other-btn">添加其他</div>
		</div>
	</div>
	<!-- <div v-if="tabindex==2" ref="medicalImageContainer" class="medical-image-container" @mousedown="onMouseDown">
	  <img ref="medicalImage" class="medical-image" src="../../../assets/images/qp.jpg" alt="Medical Image" />
	</div> -->
	<!-- <div class="container">
	    <pic-zoom url="../../../assets/images/qp.jpg" :scale="4" style="float: left;"></pic-zoom>
	    <pic-zoom url="../../../assets/images/qp.jpg" :scale="1" style="float: right;"></pic-zoom>
	  </div> -->
	  <div v-if="tabindex==2">
		  <!-- <big-img></big-img> -->
		  <div class="img-box">
			  
			  <div class="imgbox">
			  	   <img :src="beautiful"  />
				   <!-- <div class="goods-image">
				      
				        <div class="middle" ref="target">
				            <img :src="beautiful" alt=""/>
				         
				            <div class="layer" :style="{ left: `${left}px`, top: `${top}px` }" v-show="!isOutside"></div>
				        </div>
				   	  
				        
				        <div class="large" :style="[
				      {
				        backgroundImage: `url(${beautiful})`,
				        backgroundPositionX: `${positionX}px`,
				        backgroundPositionY: `${positionY}px`,
				      },
				    ]" v-show="!isOutside"></div>
				    </div> -->
			  </div>
			  
			  <div class="imgbox">
			  		<img  fit="fill" :src="beautiful" :style="imageStyle" @click="toggleZoom" />
			  </div>
			      
		  </div>
		  <!-- <div ref="imageContainer" class="image-container" @click="openZoom">
		      <img :src="src" class="image" />
		      <div v-if="isZoomed" class="zoom-layer" :style="zoomLayerStyle">
		        <img :src="src" class="zoomed-image" :style="zoomedImageStyle" />
		      </div>
		    </div> -->

		   <div class="block">
		      <el-slider v-model="zoomMultiplier" :step='0.1' :min='1' :max="10" @input="changebtn"></el-slider>
		    </div>
			</div>
</template>

<script setup>
import { ref,watch,computed,onMounted } from 'vue'
// import {useMouseInElement} from '@vueuse/core';
import beautiful from '@/assets/images/qp.jpg'
import BigImg from "../components/img.vue"
import { useMouse, useElementBounding ,useMouseInElement} from '@vueuse/core';
// import { useZoomLevel } from '@vueuse/electron';
 const zoom = ref(1);
  
 // const { increase, decrease } = useZoomLevel(zoom);
 // console.log(increase.value)
// const props = defineProps({
//   src: String,
//   zoomMargin: Number,
//   zoomFactor: Number
// });
const tabindex = ref('1')
const tabbtn = (val) => {
	tabindex.value = val
}
const imageSrc = 'path_to_your_image.jpg'; // 替换为你的图片路径
const isZoomed = ref(true);
const zoomScale = ref(2); // 放大倍数
const imageStyle = ref({
  transform: '',
  transition: 'transform 0.3s ease',
  height:'574px',
  width:'636px',
});
 const height=ref(574)
 const width=ref(636)
const toggleZoom=()=> {
  // isZoomed.value = !isZoomed.value;
  // imageStyle.value.transform = isZoomed.value ? `scale(${zoomScale.value})` : '';
  imageStyle.value.height = height.value*zoomScale.value+'px'
  imageStyle.value.width = width.value*zoomScale.value+'px'
  
}
const changebtn=(e)=>{
	console.log(e)
	zoomScale.value=e
	toggleZoom()
}
const demonstrationNumber=ref(1)
// 图片列表
const imageList = [
    // "https://p0.itc.cn/q_70/images03/20230613/d2e6aa9934d34b39b51eb4f904c361af.jpeg",//网图
    // beautiful  //自己项目中的文件，以后可以做成动图
]
let ImageIndex = ref(0)

// // 根据鼠标位置设置放大倍数
const zoomMultiplier = ref(1);
// mouse.elementX.value = mouse.elementX.value / 200; // 假设200px宽度放大倍数到10
// mouse.elementY.value = mouse.elementY.value / 200; // 假设200px高度放大倍数到10
// zoomMultiplier.value = mouse.elementX.value * 10; // 计算最终放大倍数
const target = ref(null)
// 获取鼠标位置
const {elementY, elementX, isOutside} = useMouseInElement(target)
let top = ref(0)
let left = ref(0)
let positionX = ref()
let positionY = ref()

// watch监听变化
watch([elementX, elementY], () => {
	// elementX.value =elementX.value*zoomMultiplier.value
	// elementY.value =elementY.value*zoomMultiplier.value
    // 如果鼠标在外边就不执行下边的逻辑
    if (isOutside.value) return
    // 横向
    if (elementX.value > 100 && elementX.value < 300) {
        left.value = elementX.value - 100
    }
    // 纵向
    if (elementY.value > 100 && elementY.value < 300) {
        top.value = elementY.value - 100
    }
    // 处理边界
    if (elementX.value > 300) {
        left.value = 200
    }
    if (elementX.value < 100) {
        left.value = 0
    }

    positionX.value = -left.value * 2
    positionY.value = -top.value * 2
})
</script>

<style scoped lang="scss">
	.img-box{
		display: flex;
		justify-content: flex-start;
		gap: 20px;
	}
	.imgbox{
		width: 636px;
		height: 574px;
		// width: 360px;
		// height: 360px;
		overflow: auto;
		margin-top: 30px;
		img{
		width: 636px;
		height: 574px;
		// height: auto;
		}
	}
	.top-tab{
		display: flex;
		justify-content: center;
		width: 100%;
		div{
			width: 110px;
			height: 30px;
			line-height: 30px;
			border-radius: 0px 0px 10px 10px;
			background-color: rgba(255,255,255,1);
			color: rgba(59,182,254,1);
			font-size: 14px;
			text-align: center;
			border: 1px solid rgba(59,182,254,1);
			cursor: pointer;
		}
		.active{
			background-color: rgba(59,182,254,1);
			color:#fff;
		}
	}
	
	.info-detail{
		display: flex;
		justify-content: flex-start;
		
		.info-detail-left{
			width: 49%;
			.info-box{
				height: 50px;
				display: flex;
				justify-content: space-around;
				align-items: center;
				.serialnumber{
					color: rgba(0, 0, 0, 1);
					font-size: 18px;
					font-weight: 500;
					width: 20%;
					text-align: center;
				}
				.labername{
					color: rgba(0, 0, 0, 1);
					font-size: 18px;
					font-weight: 500;
					width: 40%;
					text-align: center;
				}
				.laberconten{
					color: #828282;
					font-size: 18px;
					width: 40%;
					text-align: center;
				}
			}
			
		}
		.info-detail-right{
			width: 49%;
			position: relative;
			.idea-title{
				width: 100%;
				text-align: center;
				color: rgb(16,16,16);
				font-size: 18px;
				font-weight: 500;
				margin-top:50px;
				margin-bottom: 30px;
			}
			.idea-txt{
				color: rgba(79,79,79,1);
				font-size: 18px;
			}
			.idea-bot{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 220px;
				div{
					width: 50%;
					color: rgba(79,79,79,1);
					margin-bottom: 20px;
					font-size: 18px;
					.lefttxt{
						color: #000;
						font-weight: 500;
					}
				}
			}
			.other-btn{
				position: absolute;
				right: 0;
				top: 46%;
				width: 32px;
				height: 141px;
				line-height: 23px;
				border-radius: 10px 0px 0px 10px;
				background-color: #9faafa;
				color: rgba(255, 255, 255, 1);
				font-size: 16px;
				text-align: center;
				padding: 5px;
				padding-top: 15px;
				cursor: pointer;
			}
		}
	}
	.medical-image-container {
	  position: relative;
	  display: inline-block;
	  overflow: hidden;
	}
	.medical-image {
	  display: block;
	  width: 100%; /* 或者其他适合的宽度 */
	}
	
	.goods-image {
	    width: 480px;
	    height: 400px;
	    position: relative;
	    display: flex;
	
	    .middle {
	        // width: 400px;
	        // height: 400px;
			width: 636px;
			height: 574px;
	        background: #f5f5f5;
	
	        img{
	            width: 100%;
	            height: 100%;
	        }
	    }
	
	    .large {
	        position: absolute;
	        top: 0;
	        left: 412px;
	        width: 300px;
	        height:300px;
	        z-index: 500;
	        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	        background-repeat: no-repeat;
	        // 背景图:盒子的大小 = 2:1  将来控制背景图的移动来实现放大的效果查看 background-position
	        background-size: 800px 800px;
	        background-color: #f8f8f8;
	    }
	
	    .layer {
	        width: 200px;
	        height: 200px;
	        background: rgba(0, 0, 0, 0.2);
	        // 绝对定位 然后跟随咱们鼠标控制left和top属性就可以让滑块移动起来
	        left: 0;
	        top: 0;
	        position: absolute;
	    }
	}
	.block{
		width: 300px;
		text-align: center;
		margin: 0 auto;
	}
	
	
	
	.image-container {
	  position: relative;
	  display: inline-block;
	  cursor: zoom-in;
	}
	.image {
	  width: 100%;
	}
	.zoom-layer {
	  position: absolute;
	  top: 0;
	  left: 0;
	  overflow: hidden;
	}
	.zoomed-image {
	  position: absolute;
	  transition: transform 0.3s ease;
	}
</style>